<template>
  <div id="See" v-show="z_t_j_see.length !== 0">
    <div class="block"  style="padding-left: 30px; padding-top: 50px">
      <div>
        <span class="demonstration">选择:</span>
        <el-cascader
          v-model="z_t_j_value_see.data"
          :options="z_t_j_see"
          style="width: 500px"
          clearable
          @change="handleChange"></el-cascader>
        <el-button type="primary" @click="get_today_calls">获取当天考勤</el-button>
      </div>
      <div>
        <table border="1" style="width: 50%;margin-top: 50px">
          <th width="30px">
            id
          </th>
          <th width="30px">
            学号
          </th>
          <th width="40px">
            名字
          </th>
          <th v-for="(course_name, i) in subjects" :key="i" width="70px">
            {{course_name}}
          </th>
          <tr v-for="(record, index) in today_calls" :key="index">
            <td>
              {{index + 1}}
            </td>
            <td>
              {{record.u_num}}
            </td>
            <td>
              {{record.u_name}}
            </td>
            <td v-for="(value, key) in record.course" :key="key">
              {{STATE[value.course_state]["text"]}}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    computed: {
      ...mapState(['z_t_j_value_see', 'z_t_j_see', 'today_calls', 'subjects', 'STATE'])
    },
    methods: {
      handleChange(value) {
        console.log(value)
      },
      get_today_calls() {
        this.$store.dispatch("get_today_calls")
      }
    }
  }
</script>

<style scoped>
  #See {
    background-color: white;
    height: 1000px;
  }
</style>
